<script setup lang="ts">
import { watch, ref, onMounted, onUnmounted } from 'vue'
import * as admin from '@/apis/admin'
import * as helper from '@/util/helper'
import * as echarts from 'echarts'

let siteReportLoading = ref(true)
let apiReportLoading = ref(true)
let reportDate = ref('今天')

watch(
  () => reportDate.value,
  e => {
    let date = { 今天: 'today', 昨天: 'yesterday', 近1小时: 'h1', 近7天: 'l7', 近30天: 'l30' }[e]
    siteReport(date)
    apiReport(date)
  }
)

onMounted(() => {
  initChart()
  siteReport()
  apiReport()
})
let siteReportEchart: echarts.EChartsType | null = null
let apiReportEchart: echarts.EChartsType | null = null

onUnmounted(() => {
  let el = document.getElementById('siteReportEchart')
  if (el) echarts.dispose(el)
})

function initChart() {
  siteReportEchart = echarts.init(document.getElementById('siteReportEchart'), 'dark')
  apiReportEchart = echarts.init(document.getElementById('apiReportEchart'), 'dark')
  // 把配置和数据放这里
  window.onresize = function () {
    //自适应大小
    if (siteReportEchart) siteReportEchart.resize()
    if (apiReportEchart) apiReportEchart.resize()
  }
}

let siteReportData = ref<any>(null)

function siteReport(date?: string) {
  siteReportLoading.value = true
  admin.siteReport(date || 'today').then(res => {
    siteReportLoading.value = false
    if (!helper.checkRes(res.data)) return
    siteReportData.value = res.data.data
    let chartsData = []
    for (let v of res.data.data.list_data) {
      let e = { value: v.req, name: v.name }
      switch (e.name) {
        case 'nodejsReptile':
          e.name = 'API接口'
          break
        case 'docs.leaguenewway.com':
          continue
        case 'cv.leaguenewway.com':
          continue
        default:
          break
      }
      chartsData.push(e)
    }

    if (siteReportEchart)
      siteReportEchart.setOption({
        backgroundColor: '#00000000',
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '请求次数',
            type: 'pie',
            radius: '80%',
            data: chartsData,
            label: {
              formatter: '{b} {@value}/次'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
  })
}
function apiReport(date?: string) {
  apiReportLoading.value = true
  admin.apiReport(date || 'today').then(res => {
    apiReportLoading.value = false
    if (!helper.checkRes(res.data)) return
    if (apiReportEchart)
      apiReportEchart.setOption({
        backgroundColor: '#00000000',
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '请求次数',
            type: 'pie',
            radius: '80%',
            data: [
              { name: 'PC端', value: res.data.data.sum_data.total_pc || 0 },
              { name: '移动端', value: res.data.data.sum_data.total_mobile || 0 }
            ],
            label: {
              formatter: '{b} {@value}/次'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
  })
}
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h2>首页</h2>
      </div>
    </template>

    <el-descriptions direction="vertical" :column="5" border v-loading="siteReportLoading">
      <template #title>
        <el-radio-group v-model="reportDate">
          <el-radio-button label="今天" />
          <el-radio-button label="昨天" />
          <el-radio-button label="近1小时" />
          <el-radio-button label="近7天" />
          <el-radio-button label="近30天" />
        </el-radio-group>
      </template>
      <el-descriptions-item label="总浏览量(PV)">{{ siteReportData?.sum_data?.pv }}</el-descriptions-item>
      <el-descriptions-item label="总访客量(UV)">{{ siteReportData?.sum_data?.uv }}</el-descriptions-item>
      <el-descriptions-item label="总IP数">{{ siteReportData?.sum_data?.ip }}</el-descriptions-item>
      <el-descriptions-item label="总流量">{{ (siteReportData?.sum_data?.length / 1048576).toFixed(2) }} MB</el-descriptions-item>
      <el-descriptions-item label="总请求">{{ siteReportData?.sum_data?.req }}</el-descriptions-item>
    </el-descriptions>
    <div style="height: 20px"></div>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card v-loading="siteReportLoading">
          <template #header>
            <div class="card-header">
              <h4>请求数量</h4>
            </div>
          </template>
          <div class="echarts-box">
            <div id="siteReportEchart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card v-loading="apiReportLoading">
          <template #header>
            <div class="card-header">
              <h4>API请求分类</h4>
            </div>
          </template>
          <div class="echarts-box">
            <div id="apiReportEchart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="less">
.echarts-box {
  width: 100%;
  height: 400px;
  position: relative;

  #siteReportEchart,
  #apiReportEchart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
